// components/project/ProjectTable.tsx
"use client"

import React from 'react'
import { Edit, Trash2, Eye } from 'lucide-react'
import { Button } from '@/components/ui/button'
import { Badge } from '@/components/ui/badge'
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table'
import type { Project } from '@/types/project'

// 项目状态配置
const PROJECT_STATUS: { value: string; label: string; color: string }[] = [
  { value: "进行中", label: "进行中", color: "bg-green-100 text-green-800" },
  { value: "已完成", label: "已完成", color: "bg-gray-100 text-gray-800" }
]

interface ProjectTableProps {
  projects: Project[]
  canEditProject: boolean
  canDeleteProject: boolean
  onViewProject: (project: Project) => void
  onEditProject: (project: Project) => void
  onDeleteProject: (project: Project) => void
}

export function ProjectTable({
  projects,
  canEditProject,
  canDeleteProject,
  onViewProject,
  onEditProject,
  onDeleteProject
}: ProjectTableProps) {
  const handleDeleteProject = async (project: Project) => {
    if (window.confirm(`确定要删除项目"${project.name}"吗？此操作无法撤销。`)) {
      onDeleteProject(project)
    }
  }

  return (
    <Table>
      <TableHeader>
        <TableRow className="bg-gray-50">
          <TableHead className="w-[180px] font-semibold">项目名称</TableHead>
          <TableHead className="w-[100px] font-semibold">作物类型</TableHead>
          <TableHead className="w-[100px] font-semibold">项目负责人</TableHead>
          <TableHead className="w-[120px] font-semibold">地点</TableHead>
          <TableHead className="w-[100px] font-semibold">开始日期</TableHead>
          <TableHead className="w-[80px] font-semibold">预算(万元)</TableHead>
          <TableHead className="w-[80px] font-semibold">状态</TableHead>
          <TableHead className="w-[140px] font-semibold text-center">操作</TableHead>
        </TableRow>
      </TableHeader>
      <TableBody>
        {projects.map((project) => {
          const statusConfig = PROJECT_STATUS.find(s => s.value === project.status)
          
          return (
            <TableRow key={project.id} className="hover:bg-gray-50/50 transition-colors">
              <TableCell className="font-bold text-gray-900">
                <div className="max-w-[160px] truncate" title={project.name}>
                  {project.name}
                </div>
              </TableCell>
              <TableCell>
                <div className="max-w-[90px] truncate text-sm font-medium text-blue-700" title={project.crop_type}>
                  {project.crop_type}
                </div>
              </TableCell>
              <TableCell>
                <div className="max-w-[90px] truncate text-sm text-gray-600" title={project.manager}>
                  {project.manager || '-'}
                </div>
              </TableCell>
              <TableCell>
                <div className="max-w-[110px] truncate text-gray-600 text-sm" title={project.location}>
                  {project.location || '-'}
                </div>
              </TableCell>
              <TableCell>
                <span className="text-sm text-gray-600">
                  {project.start_date || '-'}
                </span>
              </TableCell>
              <TableCell>
                <span className="text-sm font-medium text-green-600">
                  {(project.budget / 10000).toFixed(1)}
                </span>
              </TableCell>
              <TableCell>
                <Badge className={`${statusConfig?.color} text-xs px-2 py-1`}>
                  {statusConfig?.label}
                </Badge>
              </TableCell>
              <TableCell className="text-center">
                <div className="flex justify-center space-x-1">
                  <Button
                    variant="ghost"
                    size="sm"
                    onClick={() => onViewProject(project)}
                    title="查看详情"
                    className="h-8 w-8 p-0 hover:bg-blue-50 hover:text-blue-600"
                  >
                    <Eye className="w-4 h-4" />
                  </Button>
                  
                  {canEditProject && (
                    <Button
                      variant="ghost"
                      size="sm"
                      onClick={() => onEditProject(project)}
                      title="编辑项目"
                      className="h-8 w-8 p-0 hover:bg-yellow-50 hover:text-yellow-600"
                    >
                      <Edit className="w-4 h-4" />
                    </Button>
                  )}
                  
                  {canDeleteProject && (
                    <Button
                      variant="ghost"
                      size="sm"
                      onClick={() => handleDeleteProject(project)}
                      className="h-8 w-8 p-0 hover:bg-red-50 hover:text-red-600"
                      title="删除项目"
                    >
                      <Trash2 className="w-4 h-4" />
                    </Button>
                  )}
                </div>
              </TableCell>
            </TableRow>
          )
        })}
      </TableBody>
    </Table>
  )
}